<template>
  <div id="createComment">
    <el-dialog
      :title="dialogData.title"
      :visible.sync="dialogData.isShow"
      width="500px"
    >
      <!-- 添加文件部分 -->
      <div class="form-box">
        <div class="upload-box">
          <el-upload
            action="#"
            accept=".xlsx,.xls"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="changeUpload"
          >
            <el-input
              v-model="fileName"
              disabled
              placeholder="请选择上传文件..."
            ></el-input>
            <el-button type="primary" class="upload_btn">
              <div class="fa fa-folder-open"></div>
              添加文件
            </el-button>
          </el-upload>
          <el-button
            type="info"
            v-if="dialogData.type !== 'physicalOrders'"
            class="download_btn fa fa-file-excel-o"
            @click="downloadTemplete"
          >
            下载模板
          </el-button>
          <div class="tip">
            提示：仅允许导入“xls”或“xlsx”格式文件！
            <slot name="tips"></slot>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button
          type="success"
          :loading="loading"
          @click="confirmLabel('form')"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      fileName: '',
      upFile: null
    }
  },
  methods: {
    // 文件上传成功
    changeUpload: function(file, fileList) {
      //校验格式
      let FileExt = file.name.replace(/.+\./, '')
      if (FileExt !== 'xlsx' && FileExt !== 'xls') {
        this.$message({
          message: '文件格式错误！',
          type: 'warning'
        })
        return
      }
      this.fileName = file.name
      this.upFile = file.raw
    },
    // 下载模板按钮
    downloadTemplete() {
      let url = this.dialogData.downUrl
      if (this.dialogData.params && this.dialogData.params === 'isUseAppUrl') {
        this.downFileApplet('get', url, '', '', '模板')
      } else if (
        this.dialogData.noTime &&
        this.dialogData.noTime === 'noTime'
      ) {
        this.downFile('get', url, '', '发放用户导入模板')
      } else {
        this.downFile('get', url, '', '模板')
      }
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.isShow = false
    },
    /* 确认提交 */
    confirmLabel() {
      if (!this.fileName) {
        this.$message({
          message: '请添加文件！',
          type: 'warning'
        })
        return
      }
      this.loading = true
      let url = this.dialogData.url
      let method = this.dialogData.method || 'post'
      let formData = new FormData()
      formData.append('file', this.upFile)
      if (this.dialogData.params && this.dialogData.params === 'isUseAppUrl') {
        this.pubRequireApplet(
          'post',
          url,
          formData,
          (response) => {
            this.loading = false
            this.$emit('refresh')
            this.cancelLabel()
          },
          (response) => {
            // 有上传失败的情况，弹出失败提示窗
            this.loading = false
            this.$emit('showError', response, response)
            this.$emit('refresh')
            this.cancelLabel()
          }
        )
      } else {
        this.pubRequire(
          method,
          url,
          formData,
          (response) => {
            if (this.dialogData.params === 'JD') {
              this.$emit('uploadSuccess', response)
            }
            this.$emit('getSerial', response)
            this.loading = false
            this.$emit('refresh', () => {
              this.$message.success('导入成功')
            })
            this.cancelLabel()
          },
          (response) => {
            // 有上传失败的情况，弹出失败提示窗
            this.loading = false
            this.$emit('showError', response.message, response)
            this.$emit('refresh')
            this.cancelLabel()
          }
        )
      }
    }
  }
}
</script>
<style lang="less">
#createComment {
  .upload-box {
    padding-left: 30px !important;
    .el-input {
      float: left;
      border-radius: 0;
      width: 275px !important;
      .el-input__inner {
        border-radius: 0 !important;
      }
    }
    .upload_btn {
      float: left;
      height: 32px;
      border-radius: 0;
      background: #1dc8a4;
      border: none;
    }
    .download_btn {
      margin: 10px 0;
    }
    .tip {
      color: #ff0000;
      margin-bottom: 30px;
    }
  }

  .el-dialog .el-dialog__header {
    padding: 10px !important;
  }
}
</style>
